<template>
    <div class="common-layout">
        <el-container>
            <el-card style="width: 300px;">
                <el-aside width="300px" style="height: 700px;">

                    <div>
                        <b>指标分类</b>
                        <el-button style="margin-left: 100px;;" link type="primary" @click="classsetting.isOpen = true">
                            新增
                        </el-button>
                    </div>
                    <div>
                        <el-button style="width: 190px;" v-for="a in metricsClassdata" plain
                            @click="classquery(a.metricsClassId)">{{
                                a.metricsClassName }}</el-button>
                    </div>
                </el-aside>
            </el-card>
            <el-container>
                <el-card style="margin-left: 30px;width: 100%;">
                    <el-header>
                        <el-button type="success" @click="setopen(null)">新增</el-button>
                        <el-table :data="metricdata" height="250" style="width: 100%">
                            <el-table-column prop="metricsName" label="指标名称" />
                            <el-table-column prop="metricsCode" label="指标编码" />
                            <el-table-column label="操作">
                                <template v-slot="scope" #default>
                                    <el-button link type="primary" size="small" @click="setopen(scope.row)">
                                        编辑
                                    </el-button>
                                    <el-button link type="primary" size="small"
                                        @click="open(scope.row.metricsId)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="margin-top: 400px;">
                            <el-pagination v-model:current-page="page.Pagindex" v-model:page-size="page.PagSize"
                                :page-sizes="[5, 7, 9]" :background="true"
                                layout="total, sizes, prev, pager, next, jumper" :total="page.pagecount" />
                        </div>

                    </el-header>
                </el-card>
            </el-container>
        </el-container>
    </div>
    <el-dialog v-model="classsetting.isOpen" title="新增指标分类" width="500" align-center draggable>
        <el-form>
            <el-form-item label="分类名称">
                <el-input v-model="classadd.metricsClassName" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="classsetting.isOpen = false">取消</el-button>
                <el-button type="primary" @click="classadddata">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="metricSetting.isOpen" :title="metricSetting.title" width="500" align-center draggable>
        <el-form>
            <el-form-item label="指标名称">
                <el-input v-model="metricadd.metricsName" />
            </el-form-item>
            <el-form-item label="指标编码">
                <el-input v-model="metricadd.metricsCode" />
            </el-form-item>
            <el-form-item label="指标分类">
                <el-select v-model="metricadd.metricsClassId" placeholder="请选择">
                    <el-option v-for="b in metricsClassdata" :label="b.metricsClassName" :value="b.metricsClassId" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="classsetting.isOpen = false">取消</el-button>
                <el-button type="primary" @click="metricadddata">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, onMounted, watch } from 'vue'

//指标响应式数据
const metricdata = ref([
    {
        "metricsId": 6,
        "metricsName": "脉搏",
        "metricsCode": "06",
        "metricsClassId": 2,
        "isDeleted": false,
        "metricsClassName": "辅检指标"
    },
])
//分页参数
const page = reactive({
    Pagindex: 1,
    PagSize: 4,
    pagecount: 0,
    pagetotal: 1,
})
//条件参数
const condition = reactive({
    MetricsClassId: 0,
})
//分类查询
const classquery = (t: any) => {
    condition.MetricsClassId = t

    metriclist();
}


const metriclist = () => {
    axios.get("http://localhost:5108/api/Manager/MetricsShow", {
        params: {
            Pagindex: page.Pagindex,
            PagSize: page.PagSize,
            MetricsClassId: condition.MetricsClassId,
        },
    }).then((res) => {
        metricdata.value = res.data.data.data
        page.pagecount = res.data.data.totalCount
        page.pagetotal = res.data.data.totalPage
    })
}


//指标分类
const metricsClassdata = ref([
    {
        "metricsClassId": 1,
        "metricsClassName": "\r\n体征指标"
    },
])
const metricClasslist = () => {
    axios.get("http://localhost:5108/api/Manager/MetricsClassShow").then(res => {
        metricsClassdata.value = res.data.data
        console.log(res.data)
    })
}


//钩子函数
onMounted(() => {
    metriclist()
    metricClasslist()
})
//侦听器
watch(page, () => {
    metriclist();
})


//指标分类添加
const classsetting = reactive({
    isOpen: false
})
const classadd = reactive({
    "metricsClassName": ""
})

const classadddata = () => {
    axios.post("http://localhost:5203/api/Managment/MetricsClassAdd", classadd).then(res => {
        if (res.data.code == 1) {
            ElMessage.success('新增成功')
            classsetting.isOpen = false
            metricClasslist()
        }
    })
}


//指标添加逻辑
const metricSetting = reactive({
    isOpen: false,
    title: "",
    setis: false,
})

const setopen = (t: any) => {
    metricSetting.isOpen = true
    if (t == null) {
        metricSetting.title = "新增指标"
        metricSetting.setis = true
        metricadd.isDeleted = false
        metricadd.listofdiseasesId = 0
        metricadd.metricsName = ""
        metricadd.metricsCode = ""
        metricadd.metricsClassId = ""
    }
    else {
        metricSetting.title = "编辑指标"
        metricSetting.setis = false
        metricadd.isDeleted = false
        metricadd.metricsId = t.metricsId
        metricadd.listofdiseasesId = t.listofdiseasesId
        metricadd.metricsName = t.metricsName
        metricadd.metricsCode = t.metricsCode
        metricadd.metricsClassId = t.metricsClassId
    }
}


const metricadd = reactive({
    "metricsId": 0,
    "listofdiseasesId": 1,
    "metricsName": "",
    "metricsCode": "",
    "metricsClassId": "",
    "isDeleted": true
})
const metricadddata = () => {
    if (metricSetting.setis == true) {
        axios.post("http://localhost:5203/api/Managment/MetricsAdd", metricadd).then(res => {
            if (res.data.code == 1) {
                ElMessage.success('新增成功')
                metricSetting.isOpen = false
                metriclist()
            }
        })
    }
    else {
        axios.put("http://localhost:5203/api/Managment/MetricssUpdate", metricadd).then(res => {
            if (res.data.code == 1) {
                ElMessage.success('编辑成功')
                metricSetting.isOpen = false
                metriclist()
            }
        })
    }

}
const open = (metricsId: any) => {
    ElMessageBox.confirm(
        '您确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.delete("http://localhost:5203/api/Managment/MetricssDelete", {
                data:
                    { metricsId: metricsId }
            }).then(res => {
                if (res.data.code == 1) {
                    ElMessage.success('删除成功')
                    metriclist()
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })
}


</script>

<style scoped>
/* 现代医疗系统设计风格 - 专业医疗蓝主题 */

/* 页面主容器 */
.index-management-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f2ff 100%);
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 页面标题区域 */
.page-header {
  margin-bottom: 28px;
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #003d79;
}

.breadcrumb {
  font-size: 14px;
  color: #64748b;
}

/* 主内容区域 - 左右布局 */
.main-content {
  display: flex;
  gap: 24px;
  height: calc(100vh - 180px);
}

/* 左侧分类栏 */
.sidebar {
  width: 300px;
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 123, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e6f2ff;
}

.sidebar-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #003d79;
}

.add-class-btn {
  padding: 6px 16px;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
  color: white;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.add-class-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* 分类按钮列表 */
.category-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 8px;
}

.category-list::-webkit-scrollbar {
  width: 6px;
}

.category-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.category-list::-webkit-scrollbar-thumb {
  background: #bdc3c7;
  border-radius: 3px;
}

.category-list::-webkit-scrollbar-thumb:hover {
  background: #95a5a6;
}

.category-btn {
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #374151;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.category-btn:hover {
  background: #f8fafc;
  border-color: #007bff;
  transform: translateX(4px);
}

.category-btn.active {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  border-color: #0056b3;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.category-btn.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #67edd5;
}

/* 右侧内容区域 */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.index-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 123, 255, 0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e6f2ff;
}

.card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #003d79;
}

.add-index-btn {
  padding: 8px 20px;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
  color: white;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.add-index-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* 表格容器 */
.table-container {
  flex: 1;
  overflow: hidden;
  margin-bottom: 20px;
}

.el-table {
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table__header) {
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f2ff 100%);
}

.el-table__row:hover {
  background-color: #f0f9ff;
}

.table-row-even {
  background-color: #ffffff;
}

.table-row-odd {
  background-color: #f9fafb;
}

/* 链接按钮样式 */
.edit-link:hover {
  color: #007bff;
}

.delete-link:hover {
  color: #dc3545;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

/* 弹窗样式 */
.dialog-form {
  padding: 10px 0;
}

.el-form-item {
  margin-bottom: 24px;
}

.el-form-item__label {
  font-weight: 500;
  color: #374151;
}

.el-dialog {
  border-radius: 12px;
  overflow: hidden;
}

.el-dialog__header {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  padding: 20px;
  margin: 0;
}

.el-dialog__title {
  color: white;
  font-weight: 600;
}

.el-dialog__body {
  padding: 24px;
}

.el-dialog__footer {
  padding: 16px 24px;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
}

.cancel-btn, .save-btn {
  border-radius: 6px;
  transition: all 0.3s ease;
}

.save-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
  color: white;
}

.save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    height: auto;
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    max-height: 300px;
  }
  
  .category-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .category-btn {
    width: calc(33.333% - 7px);
    min-width: 150px;
  }
}

@media (max-width: 768px) {
  .index-management-container {
    padding: 16px;
  }
  
  .page-header {
    padding: 16px;
    margin-bottom: 20px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .sidebar,
  .index-card {
    padding: 16px;
  }
  
  .category-btn {
    width: 100%;
  }
  
  .pagination-container {
    justify-content: center;
  }
  
  .el-dialog {
    width: 90% !important;
    margin: 10vh auto;
  }
}
</style>